<template>
  <div style="padding-bottom: 50px;">
    <div class="box">
    <div class="box1">
      <van-nav-bar title="美呀" :border="false" style="--van-nav-bar-background:none; color: #fff; --van-nav-bar-title-text-color: none;">
        <template #left>
          <van-icon name="search" size="20" style="color: #fff;" @click="search"/>
        </template>
        <template #right>
          <van-icon name="tv-o" size="18" style="color: #fff;" />
        </template>
      </van-nav-bar>
      <div class="grid">
        <div class="left-box">
          <div @click="jump"><img src="../../img/clipper.png" alt=""></div>
          <div @click="jump"><img src="../../img/base.png" alt=""></div>
          <div @click="jump"><img src="../../img/nail .png" alt=""></div>
        </div>
        <div class="right-box">
          <div @click="jump"><img src="../../img/lip.png" alt=""></div>
          <div @click="jump"><img src="../../img/scent.png" alt=""></div>
          <div @click="jump"><img src="../../img/eye.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>

  <h3 style="padding-left: 30px;padding-top: 30px;">精选课程</h3>
  <div class="sh-b" v-for="itme in 5">   
    <div style="margin-right: 30px;">
      <div>
        <img src="../../img/void.png" alt="" @click="vv" style="width: 335px; height: 200px;"/>
      </div>
      <div style="padding: 15px 5px; ">
        <span style="width: 180px; height: 40px; font-size: 18px">石原里美日杂妆, 超美的梅子系妆!</span>
        <div class="user">
          <span style="display: flex; align-items: center; ">
            <img src="../../img/image.png" @click="void" style="width: 30px; height: 30px; margin-right: 10px;">
            <span style="color: #8A8A8A;">唯大大</span>
          </span>
          <span style="display: flex; align-items: center">
            <span class="iconfont" style="padding-right: 10px; color: #8A8A8A;">&#xe6fc;</span>
            <span style="padding-right: 10px; color: #8A8A8A;">10447</span>
            <span class="iconfont" style="padding-right: 10px;color: #8A8A8A;">&#xe7df;</span>
            <span style="padding-right: 10px;color: #8A8A8A;">56</span>
          </span>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router'
export default {
  name:"",
  setup() {
    const router = useRouter()
    const jump = () => {
      router.push('/photo')
    }
    const vv = () => {
      router.push('/void')
    }
    const search = () => {
      router.push('/search')
    }
    return {
      jump,
      vv,
      search
    }
  }
}

</script>

<style scoped>
.box1 {
  background: url(../../img/Oval.png) no-repeat ;
  background-position: center 155%;
}

.grid {
  margin: 40px 30px;
  display: flex;
  width: 335px;
  height: 241px;
  flex-direction: column;
  background-color: white;
  border-radius: 20px;
  justify-content: space-around;
  box-shadow: 0 0 12px rgba(254,122,166,0.28);
}
.grid>div {
  display: flex;
  justify-content: space-around;
}

.sh-b {
  width: 60%;
  padding: 20px 30px;
  display: flex; 
  align-items: center;
}
.user {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}

</style>
